<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="head">
        <script type="text/javascript">
            // Blue : #3E98D3  |  Red : #EF3F61  |  Green : #2BB673  |  Orange : #F15732

            function skinChart() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinBar() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    renderer: $.jqplot.BarRenderer,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinArea() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#EF3F61', '#2BB673'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinBubble() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    renderer: $.jqplot.BubbleRenderer,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinZoom() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinPie() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77',
                    }
                };
                this.cfg.seriesDefaults = {
                    renderer: $.jqplot.PieRenderer,
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinDonut() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#3E98D3', '#EF3F61', '#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77',
                    }
                };
                this.cfg.seriesDefaults = {
                    renderer: $.jqplot.DonutRenderer,
                    shadow: false,
                    lineWidth: 1,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinBarAndLine() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#3E98D3', '#EF3F61'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 5,
                    renderer: $.jqplot.BarRenderer,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }

            function skinMeterGauge() {
                this.cfg.title = '';
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth: 5,
                    renderer: $.jqplot.MeterGaugeRenderer,
                    rendererOptions: {
                        shadow: false,
                        min: 100,
                        max: 800,
                        intervals: [200, 300, 400, 500, 600, 700, 800],
                        intervalColors: ['#3E98D3', '#EF3F61', '#2BB673', '#F15732', '#3E98D3', '#EF3F61', '#2BB673']
                    }
                }
            }

            function skinMultiAxis() {
                this.cfg.shadow = false;
                this.cfg.title = '';
                this.cfg.seriesColors = ['#2BB673', '#F15732'];
                this.cfg.grid = {
                    background: '#ffffff',
                    borderColor: '#ffffff',
                    gridLineColor: '#F5F5F5',
                    shadow: false
                };
                this.cfg.axesDefaults = {
                    rendererOptions: {
                        textColor: '#666F77'
                    }
                };
                this.cfg.seriesDefaults = {
                    shadow: false,
                    lineWidth:1,
                    renderer: $.jqplot.BarRenderer,
                    markerOptions: {
                        shadow: false,
                        size: 7,
                        style: 'circle'
                    }
                }
            }
        </script>
        <style type="text/css">
            .jqplot-target, .jqplot-axis {
                color: #546E7A;
            }
        </style>
    </ui:define>

    <ui:define name="content">
        <div class="Container50 Responsive100 NoIndent">
            <div class="Container100">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">Linear Chart</div>
                    <p:chart id="line" type="line" model="#{chartView.lineModel}" responsive="true"/>
<!--                    <div id="line"></div>
                    <script id="line_s" type="text/javascript">$(function(){PrimeFaces.cw('Chart','widget_line',{id:'line',type:'line',responsive:true,
                                data:[[[1,2],[2,1],[3,3],[4,6],[5,8]],[[1,6],[2,3],[3,2],[4,7],[5,9]]],title:"Linear Chart",legendPosition:"e",extender:skinChart,
                                axes:{yaxis: {label:"",min:0,max:10,renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:0}},xaxis: {label:"",renderer:$.jqplot.LinearAxisRenderer,
                                tickOptions:{angle:0}}},series:[{label:'Series 1',renderer: $.jqplot.LineRenderer,showLine:true,
                                markerOptions:{show:true, style:'filledCircle'}},{label:'Series 2',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}}],datatip:true},'charts');});</script>-->
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">Bar Chart</div>
                    <p:chart id="bar" type="bar" model="#{chartView.barModel}" responsive="true"/>
<!--                    <div id="bar"></div>
                    <script id="bar_s" type="text/javascript">$(function(){PrimeFaces.cw('Chart','widget_bar',{id:'bar',type:'bar',responsive:true,
                                data:[[120,100,44,150,25],[52,60,110,135,120]],title:"Bar Chart",legendPosition:"ne",extender:skinBar,
                                axes:{yaxis: {label:"Births",min:0,max:200,renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:0}},xaxis: {label:"Gender",renderer:$.jqplot.CategoryAxisRenderer,
                                tickOptions:{angle:0}}},series:[{label:'Boys'},{label:'Girls'}],ticks:["2004","2005","2006","2007","2008"],orientation:"vertical",datatip:true},'charts');});</script>-->
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">Area Chart</div>
                    <p:chart id="area" type="line" model="#{chartView.areaModel}" responsive="true" />
<!--                    <div id="area"></div>
                    <script id="area_s" type="text/javascript">$(function(){PrimeFaces.cw('Chart','widget_area',{id:'area',type:'line',responsive:true,
                                data:[[["2004",120],["2005",100],["2006",44],["2007",150],["2008",25]],[["2004",52],["2005",60],["2006",110],["2007",90],["2008",120]]],title:"Area Chart",legendPosition:"ne",
                                extender:skinArea,axes:{yaxis: {label:"Births",min:0,max:300,renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:0}},
                            xaxis: {label:"Years",renderer:$.jqplot.CategoryAxisRenderer,tickOptions:{angle:0}}},series:[{label:'Boys',renderer: $.jqplot.LineRenderer,fill:true,fillAlpha:1.0,showLine:true,
                                markerOptions:{show:true, style:'filledCircle'}},{label:'Girls',renderer: $.jqplot.LineRenderer,fill:true,fillAlpha:1.0,showLine:true,
                                markerOptions:{show:true, style:'filledCircle'}}],stackSeries:true,showPointLabels:true,datatip:true},'charts');});</script>-->
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">Bubble Chart</div>
                    <p:chart id="bubble" type="bubble" model="#{chartView.bubbleModel}" responsive="true"/>
<!--                    <div id="bubble"></div>
                    <script id="bubble_s" type="text/javascript">$(function(){PrimeFaces.cw('Chart','widget_bubble',{id:'bubble',type:'bubble',responsive:true,
                                data:[[[70,183,55,"Acura"],[45,92,36,"Alfa Romeo"],[24,104,40,"AM General"],[50,123,60,"Bugatti"],[15,89,25,"BMW"],[40,180,80,"Audi"],[70,70,48,"Aston Martin"]]],title:"Bubble Chart",
                                extender:skinBubble,axes:{yaxis: {label:"Labels",min:0,max:250,renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:0}},xaxis: {label:"Price",renderer:$.jqplot.LinearAxisRenderer,
                                tickOptions:{angle:0}}},showLabels:true,bubbleGradients:false,bubbleAlpha:1.0,datatip:true},'charts');});</script>-->
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">Zoom Chart</div>
                    <p:chart id="date" type="line" model="#{chartView.zoomModel}" responsive="true"/>
<!--                    <div id="date"></div>
                    <script id="date_s" type="text/javascript">$(function(){PrimeFaces.cw('Chart','widget_date',{id:'date',type:'line',responsive:true,
                                data:[[["2014-01-01",51],["2014-01-06",22],["2014-01-12",65],["2014-01-18",74],["2014-01-24",24],["2014-01-30",51]],
                            [["2014-01-01",32],["2014-01-06",73],["2014-01-12",24],["2014-01-18",12],["2014-01-24",74],["2014-01-30",62]]],title:"Zoom for Details",
                                extender:skinZoom,axes:{yaxis: {label:"Values",renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:0}},
                            xaxis: {label:"Dates",max:"2014-02-01",renderer:$.jqplot.DateAxisRenderer,tickOptions:{angle:-50,formatString:"%b %#d, %y"}}},
                                series:[{label:'Series 1',renderer: $.jqplot.LineRenderer,showLine:true,markerOptions:{show:true, style:'filledCircle'}},{label:'Series 2',renderer: $.jqplot.LineRenderer,showLine:true,
                                markerOptions:{show:true, style:'filledCircle'}}],zoom:true,datatip:true},'charts');});</script>-->
                </div>
            </div>
        </div>

        <!-- -->

        <div class="Container50 Responsive100 NoIndent">
            <div class="Container100">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">Pie Chart</div>
                    <p:chart id="pie" type="pie" model="#{chartView.pieModel}" responsive="true" />
<!--                    <div id="pie"></div>
                    <script id="pie_s" type="text/javascript">$(function(){PrimeFaces.cw('Chart','widget_pie',{id:'pie',type:'pie',responsive:true,
                                data:[[["Brand 1",540],["Brand 2",325],["Brand 3",702],["Brand 4",421]]],title:"Simple Pie",legendPosition:"w",
                                extender:skinPie,datatip:true,datatipFormat:"%s - %d"},'charts');});</script>-->
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">Donut Chart</div>
                    <p:chart id="donut" type="donut" model="#{chartView.donutModel}" responsive="true" />
<!--                    <div id="donut"></div>
                    <script id="donut_s" type="text/javascript">$(function(){PrimeFaces.cw('Chart','widget_donut',{id:'donut',type:'donut',responsive:true,
                                data:[[["Brand 1",150],["Brand 2",400],["Brand 3",200],["Brand 4",10]],[["Brand 1",540],["Brand 2",125],["Brand 3",702],["Brand 4",421]],
                            [["Brand 1",40],["Brand 2",325],["Brand 3",402],["Brand 4",421]]],title:"Donut Chart",legendPosition:"w",
                                extender:skinDonut,datatip:true,datatipFormat:"%s - %d"},'charts');});</script>-->
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">Bar And Line Chart</div>
                    <p:chart id="combined" type="bar" model="#{chartView.combinedModel}" responsive="true" />
<!--                    <div id="combined"></div>
                    <script id="combined_s" type="text/javascript">$(function(){PrimeFaces.cw('Chart','widget_combined',{id:'combined',type:'bar',responsive:true,
                                data:[[120,100,44,150,25],[52,60,110,135,120]],title:"Bar and Line",legendPosition:"ne",highlightMouseOver:false,extender:skinBarAndLine,
                                axes:{yaxis: {label:"",min:0,max:200,renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:0}},
                            xaxis: {label:"",renderer:$.jqplot.CategoryAxisRenderer,
                                tickOptions:{angle:0}}},series:[{label:'Boys',renderer: $.jqplot.BarRenderer},{label:'Girls',renderer: $.jqplot.LineRenderer,showLine:true,
                                markerOptions:{show:true, style:'filledCircle'}}],ticks:["2004","2005","2006","2007","2008"],orientation:"vertical",showPointLabels:true},'charts');});</script>-->
                </div>
            </div>

            <div class="Container100">
                <div class="Card">
                    <div class="CardBigTopic TexAlCenter">Multi Axis Chart</div>
                    <p:chart id="multiAxis" type="line" model="#{chartView.multiAxisModel}" responsive="true"/>
<!--                    <div id="multiAxis"></div>
                    <script id="multiAxis_s" type="text/javascript">$(function(){PrimeFaces.cw('Chart','widget_multiAxis',{id:'multiAxis',type:'line',responsive:true,
                                data:[[["2004",120],["2005",100],["2006",44],["2007",150],["2008",25]],[["A",52],["B",60],["C",110],["D",135],["E",120]]],title:"Multi Axis Chart",highlightMouseOver:false,
                                extender:skinMultiAxis,axes:{yaxis: {label:"Birth",min:0,max:200,renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:0}},x2axis: {label:"Period",renderer:$.jqplot.CategoryAxisRenderer,
                                tickOptions:{angle:0}},y2axis: {label:"Number",min:0,max:200,renderer:$.jqplot.LinearAxisRenderer,tickOptions:{angle:0}},
                            xaxis: {label:"Years",renderer:$.jqplot.CategoryAxisRenderer,
                                tickOptions:{angle:0}}},series:[{label:'Boys',renderer: $.jqplot.BarRenderer},{label:'Girls',renderer: $.jqplot.LineRenderer,xaxis:"x2axis",yaxis:"y2axis",showLine:true,
                                markerOptions:{show:true, style:'filledCircle'}}],datatip:true},'charts');});</script>-->
                </div>
            </div>
        </div>

    </ui:define>
</ui:composition>